/**
* 头部菜单
*/ 
<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#fff"
      text-color="#fff"
      active-text-color="#fff"
    >
      <el-button v-if="active==2" class="buttonimg" @click="toggle(collapsed)">
        <i style="font-size:24px" :class="collapsed?'el-icon-s-fold':'el-icon-s-unfold'"></i>
        <!-- <img class="showimg" :src="collapsed?imgsq:imgshow" > -->
      </el-button>
      <div style="display: inline-block;line-height:60px;padding-left: 22px;font-size: 18px;font-weight: 600;" v-if="active == 1">游呵管家</div>
      <el-menu-item index="1" style="float: right;margin-right: 20px;">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <!-- <img class="topimg" src="https://aos-cdn-image.amap.com/pp/avatar/7ad/e3/4c/347860870.gif?ver=1565849513" /> -->
             <span style="margin-left:10px;">{{userName}}</span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="exit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
      <!-- <el-menu-item index="2" style="float: right;text-align:center;">
          <div style="height:30px;color:#999;" title="消息中心" @click="tomessage">
            <el-badge class="item" style="height:30px;position: relative;">
              <i class="el-icon-message-solid"></i>
              <div class="cored"></div>
            </el-badge>
          </div>
      </el-menu-item> -->

      <!-- <el-submenu index="2" class="submenu" style="float: right;margin-right: 5px;">
        <template slot="title">{{this.abdpConfig.getAuther('role').roleName}}</template>
        <template slot="title">管理员</template>

        <el-menu-item @click="dialog = true" index="2-1">修改密码</el-menu-item>
        <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
      </el-submenu>-->
    </el-menu>

    <el-drawer
      title="修改密码"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content" style="margin-top:60px;">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="旧密码" prop="oldPass" style="width: 80%">
            <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="pass" style="width: 80%">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass" style="width: 80%">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="logining">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: "navcon",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      active:2,
      collapsed: true,
      imgshow: require("../assets/img/show.png"),
      imgsq: require("../assets/img/sq.png"),

      dialog: false,
      logining: false,
      ruleForm: {
        oldPass: "",
        pass: "",
        checkPass: ""
      },
      rules: {
        oldPass: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ]
      },
      userName:'',
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.active= sessionStorage.getItem('active');
    this.userName=this.abdpConfig.getAuther('role');
  },
  methods: {
    // 退出登录
    exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          sessionStorage.clear();
          setTimeout(() => {
            this.$router.push({ path: "/login" });
            this.$message({
              type: "success",
              message: "已退出登录!"
            });
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 去消息中心
    tomessage(){
      this.$router.push({ path: "/message" });
    },
    // 切换显示
    toggle(showtype) {
      this.collapsed = !showtype;
      this.$root.Bus.$emit("toggle", this.collapsed);
    },

    //修改密码
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.logining = true;
          setTimeout(() => {
            let tData = {
              action: "Admin/updatePassword",
              headers: this.abdpConfig.getApiJson(),
              data: {
                password: this.ruleForm.oldPass,
                newPassword: this.ruleForm.pass
              }
            };

            this.abdpAjax.http(tData).then(rsp => {
              if (rsp.data.code == 200) {
                this.$message({
                  showClose: true,
                  message: rsp.data.msg,
                  type: "success"
                });
                this.dialog = false;
              } else {
                this.$message.error(rsp.data.msg);
              }
              this.logining = false;
            });
          }, 1000);
        } else {
          this.logining = false;
          return false;
        }
      });
    },
    cancelForm() {
      this.logining = false;
      this.dialog = false;
    }
  }
};
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}
.topimg {
  width: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.cored {
  background: red;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 18px;
}
.submenu {
  float: right;
}
.el-menu-item {
  padding: 0 10px !important;
}
.el-menu-item [class^="el-icon-"] {
  margin-left: 0px !important;
  margin-bottom: 36px;
}

.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
}
.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
}
.showimg:active {
  border: none;
}
</style>